<?php
    session_start();
    include("includes/connect_db.php");
?>

<?php include("includes/function.php"); ?>

<style>
    div{
        font-family: 'SEGOE UI';
    }

    .table{
        border-top: 1px solid #DDD;
        border-bottom: 1px solid #DDD;
    }

    #form-modal{
        max-height: 800px;
    }

    .over{
        border: 1px solid #DDD;
        max-height: 500px;
        overflow: auto;
    }
    .tandaSemua{
        color: #08c;
        cursor: pointer;
    }
</style>

<div id="form-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header" style="background-color: #0088cc; height: 40px; color: #FFF; text-shadow: none; font-family: 'SEGOE UI'">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove icon-white"></i></button>
        <h3 id="myModalLabel">
            Pilih Kontak
        </h3>
    </div>
    <div class="modal-body">
        <div class="over">
        <table class="table">
            <?php
                $sql_cari_kontak = "SELECT * FROM tb_kontak";
                $query_cari_kontak = mysql_query($sql_cari_kontak);

                while ($cari_kontak = mysql_fetch_array($query_cari_kontak)) {
            ?>

            <tr>
                <td>
                    <input class="check-real" type="checkbox" name="pilih" value="<?php echo $cari_kontak['id_kontak']?>" style="display:none">
                    <i class="icon-check check" style="opacity:0.2"></i>
                </td>
                <td>
                    <img style="height: 30px;" src="<?php echo cekGambar($cari_kontak['id_kontak'], 1, 3); ?>">
                    <?php echo $cari_kontak['nama_kontak']?>
                </td>
                <td>
                    <?php 
                        $sql = "SELECT * FROM tb_kontak_rincian WHERE id_kontak = '$cari_kontak[id_kontak]' AND is_primary = 1";
                        $query = mysql_query($sql);
                        $baris = mysql_fetch_array($query);
                        echo $baris['no_hp'];
                    ?>
                </td>
            </tr>

            <?php
                }
            ?>
        </table>
    </div>
    </div>
    <div class="modal-footer">
        <span class="tandaSemua" class="pull-right" style="opacity:0.2">
            <input class="check-real-all" type="checkbox" style="display: none">
            <i class="icon-check check-all"></i>
            Tandai Semua
        </span>
        <button type="submit" style="width: 80px;" class="btn btn-info" name="pilih" id="btnPilih">Pilih</button>
    </div>
</div>


<script type="text/javascript">
    var cek = 0;
    var tempView = '';
    function cekKontak() {
        $('.check-real').each(function(){
            var idTemp = $(this).val();
            var tempPlacer = $(this);
            tempPlacer.parent('td').find('.check-real').removeAttr('checked');
            tempPlacer.parent('td').find('.check').css('opacity','0.2');
            tempPlacer.parent('td').parent('tr').removeClass('info');
            for (var i = 0; i < id.length; i++) {
                if(id[i] == idTemp){
                    tempPlacer.parent('td').find('.check-real').attr('checked','checked');
                    tempPlacer.parent('td').find('.check').css('opacity','1');
                    tempPlacer.parent('td').parent('tr').addClass('info');
                }
            };
        });
        if(id.length==$('.check').length){
            $('.tandaSemua').css('opacity','1');
            $('.check-real-all').attr('checked','checked');
        } else{
            $('.tandaSemua').css('opacity','0.2');
            $('.check-real-all').removeAttr('checked');
        }
    }

    $(document).ready(function() {
        $('#form-modal').modal('show');
        $('.check').live('click',function(){
            if($(this).parent('td').find('.check-real').is(':checked')){
                cek--;
                $(this).parent('td').find('.check-real').removeAttr('checked');
                $(this).css('opacity','0.2');
                $(this).parent('td').parent('tr').removeClass('info');
                $(this).parent('td').parent('tr').css('color','');
                var index = id.indexOf($(this).parent('td').find('.check-real').val());
                id.splice(index, 1);
            }else{
                cek++;
                $(this).parent('td').find('.check-real').attr('checked','checked');
                $(this).css('opacity','1');
                $(this).parent('td').parent('tr').addClass('info');
                $(this).parent('td').parent('tr').css('color','');
                id.push($(this).parent('td').find('.check-real').val());
            }
            
            if(cek > 0){
                $('.but-del').removeAttr('disabled');
            } else{
                $('.but-del').attr('disabled','disabled');
            }
            
            if(cek==$('.check').length){
                $('.tandaSemua').css('opacity','1');
                $('.check-real-all').attr('checked','checked');
            } else{
                $('.tandaSemuaS').css('opacity','0.2');
                $('.check-real-all').removeAttr('checked');
            }
        });
        
        $('.tandaSemua').click(function(){
            var cekCentang = $(this).find('.check-real-all');
            if(cekCentang.is(':checked')){
                $('.check').each(function(){
                    var temp = $(this);
                    if($(this).parent('td').find('.check-real').is(':checked')){    
                        temp.click();
                    }
                });
                cekCentang.removeAttr('checked');
                $(this).parent('span').css('opacity','0.2');
            }else{
                $('.check').each(function(){
                    var temp = $(this);
                    if(!$(this).parent('td').find('.check-real').is(':checked')){   
                        temp.click();
                    }
                });
                cekCentang.attr('checked','checked');
                $(this).parent('span').css('opacity','1');
            }
        });

        
        $('.tandaSemua').live({
            mouseenter:
               function()
               {
                    $(this).css('opacity','1');
               },
            mouseleave:
               function()
               {
                    if(!$(this).find('.check-real-all').is(':checked')){
                        $(this).css('opacity','0.2');
                    }       
               }
           }
        );

        $('#btnPilih').on('click', function(){
            $('#form-modal').modal('hide');
        });
    });
</script>